"use client";

import { useTranslation } from "react-i18next";
import { useLanguageStore } from "@/store/languageStore";
import Image from "next/image";
// import { CDN } from "@/utils/env";

export default function Language() {
  const { i18n } = useTranslation();
  const { language, isMenuOpen, changeLanguage, toggleMenu } =
    useLanguageStore();

  const list = [
    { label: "中文", value: "zh-CN" },
    { label: "English", value: "en" },
    { label: "Português", value: "pt-BR" },
    { label: "ภาษาไทย", value: "th" },
  ];

  if (!isMenuOpen) return null; // 如果菜单未打开，则不渲染组件

  return (
    <div
      className="fixed top-[0] left-0 right-0 bottom-0 bg-black bg-opacity-30 z-10 flex justify-end"
      onClick={() => toggleMenu(false)} // 点击背景关闭菜单
    >
      <div className="bg-white h-full w-[200px] animate-[fadeInRight_0.1s_ease-in-out]">
        <ul>
          {list.map((item) => {
            return (
              <li
                key={item.value}
                className="p-[16px] text-[#161823] text-[14px] font-[400] flex justify-between active:bg-[#ddd] cursor-pointer"
                onClick={() => {
                  console.log(item.value, "item.value");
                  changeLanguage(item.value); // 更新语言状态
                  i18n.changeLanguage(item.value); // 更新 i18n 的语言
                  document.documentElement.lang = item.value; // 更新 HTML 的语言属性
                }}
              >
                <span>{item.label}</span>
                {language === item.value && (
                  <Image
                    src="/images/check.svg"
                    alt=""
                    width={16}
                    height={16}
                  />
                )}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
